/*
 * @Author: yangzonglong
 * @Date: 2021-05-13 16:09:40
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-05-14 17:56:13
 * @Auditor: 
 */
import React, { useState } from 'react';
import { Tabs } from '@library';
import Baseset from './_Baseset';
import Viewset from './_Viewset';
import Pageset from './_Pageset';
import Actionset from './_Actionset';
import style from './../style.module.scss';

const T = window.$app.t;

const tabsData = [
  { id: 'baseinfo', label: T('baseSet') },
  { id: 'choice', label: T('selectSet') },
  { id: 'view', label: T('viewSet') },
  { id: 'page', label: T('pageSet') }
]

export default () => {
  const [tabId, setTabId] = useState(tabsData[0].id);

  return (
    <div className={style.scroll}>
      <Tabs mode='tabs' onChange={setTabId} curTabId={tabId} tabs={tabsData} />
      <main>
        {tabId === tabsData[0].id && <Baseset />}
        {tabId === tabsData[1].id && <Actionset />}
        {tabId === tabsData[2].id && <Viewset />}
        {tabId === tabsData[3].id && <Pageset />}
      </main>
    </div>
  )
}